<template>
    <!-- 热点内容 -->
        <div class="loginHot">
            <div class="main">
                <div class="mod">
                    <h2>
                        热点内容······
                        <span class="pl">&nbsp;(<a href="###">更多</a>) </span>
                    </h2>
                    <!-- 右侧列表 -->
                    <div class="albums">
                        <ul>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="./images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###">
                                    <span>为女儿下厨做饭</span>
                                </a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="./images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="./images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                            <li>
                                <div class="pic">
                                    <a href="###">
                                        <img src="./images/1.webp" alt="" />
                                    </a>
                                </div>
                                <a href="###"><span>为女儿下厨做饭</span></a>
                                <span class="num">48张照片</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 中间列表 -->
                    <div class="notes">
                        <ul>
                            <li class="first">
                                <div class="title">
                                    <a href="###">一个普通影迷青年的北漂考研日记</a>
                                </div>
                                <div class="author">
                                    旅地球的灵长类的日记
                                </div>
                                <p>大三北漂、住地下室、毕联炸组、一战失败、毕业离别、399上岸、北电生活、全流程复...</p>
                            </li>
                            <li><a href="###">普通人观察日记 — 今生有缘成夫妻</a></li>
                            <li><a href="###">青藏铁路 | Z165：沿着铁道，一路向西</a></li>
                            <li><a href="###">花11块钱种了盆豆苗，那想到收获了价值百万的欢乐</a></li>
                            <li><a href="###">唐琴过眼瘾录</a></li>
                            <li><a href="###">那匹马、那棵树和地瓜</a></li>
                            <li><a href="###">影视行业为什么拒绝新人？——真实的行业壁垒</a></li>
                            <li><a href="###">苏维埃社会主义共和国联盟在不足5平方厘米的世界中继续存在</a></li>
                            <li><a href="###">敢不敢，再回头看</a></li>
                            <li><a href="###">全职写作两年，和大家公开一下我的收入，聊聊我的焦虑</a></li>
                        </ul>
                    </div>
                    <!-- 右侧列表 -->
                    <div class="modCon">
                        <a href="###">
                            <img src="./images/right.jpg" alt="">
                        </a>
                        <h2>
                            热门话题
                            &nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;&nbsp;&middot;
                            <span class="pl">&nbsp;(<a href="###">去话题广场</a>) </span>
                        </h2>
                        <ul>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                            <li class="rec_topics">
                                <a href="###" class="rec_topics_name">看展记</a>
                                <span class="rec_topics_subtitle">3010.7万次浏览</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</template>
<script>
import {reqgetHotListData} from '@/api'

export default {
    mounted() {
        this.getHotListData()
    },
    methods: {
        async getHotListData(){
            let result = await reqgetHotListData()
            console.log(result)
        }
    },
}
</script>
<style lang="less" rel="stylesheet/less" scoped>
        //热点内容
        .loginHot{
            .main{
                display: flex;
                .mod{
                    width: 960px;
                    height: 500px;
                    // background: burlywood;
                    margin: 20px auto;
                    overflow: hidden;
                    //标题内容
                    h2{
                        font: 15px Arial, Helvetica, sans-serif;
                        color: #072;
                        margin: 0 0 12px 0;
                        line-height: 150%;
                        .pl{
                            font: 12px Arial, Helvetica, sans-serif;
                            line-height: 150%;
                            color: #666666
                        }
                    }
                    // 右侧列表
                    .albums{
                        float: left;
                        margin-right: 20px;
                        ul{
                            width: 350px;
                            height: 407px;
                            li{
                                width: 50%;
                                float: left;
                                margin-top: 10px;
                                
                                // margin-right: 5px;
                                a{
                                    display: inline-block;
                                    word-wrap: break-word;
                                    // white-space: pre-wrap;
                                }
                                .pic{
                                    a{
                                        display: block;
                                        img{
                                            width: 170px;
                                            height: 170px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    //中间列表
                    .notes{
                        float: left;
                        width: 275px;
                        height: 374px;
                        // margin-top: 10px;
                        ul{
                            li{
                                margin-top: 12px;
                                .title{
                                    margin-bottom: 5px;
                                }
                            }
                        }
                    }
                    //右侧列表
                    .modCon{
                        width: 265px;
                        height: 500px;
                        float:right;
                        margin-left: 30px;
                        a{
                            img{
                                width: 250px;
                                height: 125px;
                                margin-bottom: 15px;
                            }
                        }
                        ul{
                            .rec_topics{
                                margin-bottom: 15px;
                                .rec_topics_name{
                                    display: inline-block;
                                    margin-bottom: 6px;
                                    font-size: 14px;
                                    line-height: 1.3;
                                    color: #3377aa;
                                }
                                .rec_topics_subtitle{
                                    display: block;
                                    margin-bottom: 15px;
                                    font-size: 13px;
                                    line-height: 1;
                                    color: #aaaaaa;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
        }
</style>